<template>
  <a-form
    id="components-form-demo-normal-login"
    :form="form"
    class="login-form"
    @submit="handleSubmit"
  >
    <a-form-item label="显示错误信息">
      <a-checkbox v-model="showErrorInfo"> </a-checkbox>
    </a-form-item>
    <a-form-item>
      <a-input
        v-decorator="[
          'userName',
          {
            rules: [{ required: true, message: '请输入用户名!' }],
          },
        ]"
        placeholder="用户名"
      >
        <a-icon slot="prefix" type="user" style="color: rgba(0, 0, 0, 0.25)" />
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-input
        v-decorator="[
          'password',
          {
            rules: [{ required: true, message: '请输入密码!' }],
          },
        ]"
        type="password"
        placeholder="密码"
      >
        <a-icon slot="prefix" type="lock" style="color: rgba(0, 0, 0, 0.25)" />
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-input
        v-decorator="[
          'bridgeShipQueryApi',
          {
            rules: [
              { required: true, message: '请输入整桥发运单查询接口url!' },
            ],
          },
        ]"
        placeholder="整桥发运单查询接口"
      >
        <a-icon slot="prefix" type="link" style="color: rgba(0, 0, 0, 0.25)" />
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-input
        v-decorator="[
          'bridShipDetQueryApi',
          {
            rules: [
              { required: true, message: '请输入整桥发运单详情查询接口url!' },
            ],
          },
        ]"
        placeholder="整桥发运单详情查询接口"
      >
        <a-icon slot="prefix" type="link" style="color: rgba(0, 0, 0, 0.25)" />
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit" class="login-form-button">
        保存并检测配置有效性
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import { getUserSetting, setUserSetting } from "@/api/main";

export default {
  name: "Login",
  data() {
    return {
      showErrorInfo: false,
      form: this.$form.createForm(this, { name: "normal_login" }),
    };
  },
  mounted() {
    this.init();
  },
  watch: {
    showErrorInfo: function (val, oldvalue) {
      console.log(val, oldvalue);
      localStorage.setItem("showErrorInfo", val);
    },
  },
  methods: {
    init() {
      let showErrorInfo = localStorage.getItem("showErrorInfo");
      if (showErrorInfo) {
        this.showErrorInfo = showErrorInfo;
      }
      // getUserSetting().then((res) => {
      //   if (res.code !== 0) {
      //     return false;
      //   }
      //   this.form = res.data;
      // });
      const userSetting = localStorage.getItem("userSetting");
      if (userSetting) {
        this.form = JSON.parse(userSetting);
      }
    },
    handleSubmit() {
      // e.preventDefault();
      // this.form.validateFields((err, values) => {
      //   if (!err) {
      //     console.log("Received values of form: ", values);
      //   }
      // });

      // localStorage.setItem("userSetting", JSON.stringify(this.form));
      this.goBack();
    },
    goBack() {
      this.$router.replace({
        name: "Welcome",
      });
    },
  },
};
</script>

<style>
</style>